<template>
  <el-autocomplete
        v-model="value"
        :fetch-suggestions="querySearch"
        class="inline-input w-50"
        placeholder="Please Input"
        @change="onChange"
        @select="handleSelect"
      />
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref, watch } from "vue";
import { isArray } from "/@/core/utils";


export default defineComponent({
  name: "sectionTheme",

  // props: {
  // 	modelValue: [String, Number, Array],
  // 	props: Object
  // },

  // props: {
  // 	value: {
  // 		type: String,
  // 	}
  // },
  // 暴露这个方法
  expose: ['getCourseSourceByCourseType','handleClear'],
  emits: ["update:modelValue"],

  setup(props, { emit }) {
    // 请求服务
    const service = inject<any>("service");

    // 数据列表
    const list = ref<any[]>([]);

    // 绑定值
    const value = ref<any>();

    // 绑定值回调
    function onChange(val: any) {
      // alert(val)
      console.log(val,"val_______");
      
      emit("update:modelValue", val);
    }


    const restaurants = ref([])
    const querySearch = (queryString: string, cb: any) => {
      const results = queryString
        ? restaurants.value.filter(createFilter(queryString))
        : restaurants.value
      // call callback function to return suggestions
      cb(results)
    }
    const createFilter = (queryString: string) => {
      return (restaurant: { value: string; }) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
      }
    }

    const handleSelect = (item: RestaurantItem) => {
      console.log(item,"item+++++++++")
      value.value = item.value
      emit("update:modelValue", item.value);
    }

    const handleClear = (type: any) => {
      getCourseSourceByCourseType(type)
    }


    

    onMounted(() => {
      // restaurants.value = loadAll()
    })

    // 解析值
    // watch(
    // 	() => props.value,
    // 	(val: any) => {
    // 		value.value = (isArray(val) ? val : [val]).filter(Boolean);
    // 	},
    // 	{
    // 		immediate: true
    // 	}
    // );

    onMounted(async () => {
      console.log(service);

      list.value = await service.courseTypeService.list();
      console.log(list.value);

    });

    // 根据课程类型获取到最新的10条课程记录
    const getCourseSourceByCourseType = async function(course_type: any){
      restaurants.value = []
      const res = await service.courseSourceService.page({page:1,size:5,course_type:course_type})
      console.log(res,"st------------");
      res.list.forEach(element => {
        restaurants.value.push({value:element.section_theme,label:element.section_theme})
      });
    }

    return {
      list,
      value,
      onChange,
      querySearch,
      handleSelect,
      getCourseSourceByCourseType,
      handleClear
    };
  }
});
</script>
